<template>

	<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
		<template #header>
			<el-row>
				<el-col :span='10'>
					<div style='line-height: 32px'>流程模板</div>
				</el-col>
				<el-col :span='14' style='text-align: right'>
					<el-button type='success' @click='save(state)' plain>保 存</el-button>
					<el-button type='info' plain>复 制</el-button>
					<el-button type='info' @click='pageClose' plain>关 闭</el-button>
				</el-col>
			</el-row>
		</template>
		<CateModal url='oa/flow/cate/tree' ref='cateModal' @close='cateChoose' />
		<div style='margin-top: 8px;margin-bottom: 8px'>
			<el-form ref='formRef' :model='form' label-width='140px'>
				<el-tabs type='card' v-model='activeName'>
					<el-tab-pane label='基本信息' name='tab1' class='zform'>
						<el-row style='border-top: 1px solid #d2d2d2;'>
							<el-col :span='12'>
								<el-form-item label='模板名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
									<div class='zinput'>
										<el-input v-model='form.name'></el-input>
									</div>
								</el-form-item>
							</el-col>
							<el-col :span='12'>
								<el-form-item label='所属分类：' prop='cate' :rules="[{ required: true, message: '分类不能为空'}]">
									<div class='zinput'>
										<el-input :value='form.cate?.name' :suffix-icon='Search' :readonly='true' @click='openCateModal'></el-input>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span='12'>
								<el-form-item label='排序号：'>
									<div class='zinput'>
										<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%' />
									</div>
								</el-form-item>
							</el-col>
							<el-col :span='12'>
								<el-form-item label='是否可用：'>
									<div class='zinput'>
										<el-switch v-model='form.avtag'>
										</el-switch>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>

					<el-tab-pane label='审批内容' name='tab2'>
						<el-row style='border-top: 1px solid #d2d2d2;'>
							<el-col :span='24'>
								<v-form-designer ref='vform' />
							</el-col>
						</el-row>
					</el-tab-pane>

					<el-tab-pane label='流程配置' name='tab3'>
						<div style='width: 100%;height: 720px'>
							<!--							<Modeler2 @bpmnMounted='bpmnMounted' />-->
							<Modeler @bpmnMounted='bpmnMounted' />
							<Panel />
							<BpmnActions />
						</div>
					</el-tab-pane>

					<el-tab-pane label='权限配置' name='tab4' class='zform'>
						<el-row style='border-top: 1px solid #d2d2d2;'>
							<el-col :span='24'>
								<el-form-item label='备注：'>
									<div class='zinput' style='height: auto'>
										<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
															type='textarea' :rows='4'
															v-model='form.notes'>
										</el-input>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>

					<el-tab-pane label='其他信息' name='tab9' class='zform'>
						<el-row style='border-top: 1px solid #d2d2d2;'>
							<el-col :span='24'>
								<el-form-item label='备注：'>
									<div class='zinput' style='height: auto'>
										<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
															type='textarea' :rows='4'
															v-model='form.notes'>
										</el-input>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-show='form.crtim'>
							<el-col :span='6'>
								<el-form-item label='创建人：'>
									<div class='zinput'>
										{{ form.crman ? form.crman.name : '' }}
									</div>
								</el-form-item>
							</el-col>
							<el-col :span='6'>
								<el-form-item label='创建时间：'>
									<div class='zinput'>
										{{ form.crtim }}
									</div>
								</el-form-item>
							</el-col>
							<el-col :span='6'>
								<el-form-item label='更新人：'>
									<div class='zinput'>
										{{ form.upman ? form.upman.name : '' }}
									</div>
								</el-form-item>
							</el-col>
							<el-col :span='6'>
								<el-form-item label='更新时间：'>
									<div class='zinput'>
										{{ form.uptim }}
									</div>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
	</el-card>
</template>
<script lang='ts'>
export default { name: 'OaFlowTempEdit3' };
</script>
<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs } from 'vue';
import { pageSave, pageClose } from '/@/comps/page/edit';
import { useRoute } from 'vue-router';
import Modeler from '/@/comps/Activiti/Modeler';
import Panel from '/@/comps/Activiti/panel';
import BpmnActions from '/@/comps/Activiti/bpmn-actions';
import { BpmnStore } from '/@/bpmn/store';
import { NextLoading } from '/@/utils/loading';
import CateModal from '/@/comps/gen/GenModal.vue';
import { FormInstance } from 'element-plus';
import request from '/@/utils/request';

const route = useRoute();
const formRef = ref<FormInstance>();
const activeName = ref('tab1');

const state = reactive({
	url: '/oa/flow/temp',
	params: { path: '', query: {} as any},
	form: { avtag: true } as any,
});

const { form } = toRefs(state);


onMounted(async () => {
	NextLoading.done();
	state.params = <any>route;
	let id = state.params.query?.id;
	if (id) {
		state.form = await request({
			url: state.url + '/one/' + id,
			method: 'get',
		});
	} else {
		let catid = state.params.query?.catid;
		if (catid) {
			state.form.cate = { id: catid, name: state.params.query?.catna };
		}
		state.form.avtag = true;
	}

	if (form.value.id) {
		await BpmnStore.importXML(form.value.prxml);
	} else {
		await BpmnStore.importXML(defxml);
	}

});


async function save(state: any) {

	const bpmn = await BpmnStore.getXML();
	// console.log(typeof (bpmn.xml));
	// xFlow.value.getData();
	form.value.vform = JSON.stringify(vform.value.getFormJson());
	form.value.prxml = bpmn.xml;
	console.log(bpmn.xml);
  await pageSave({formRef:formRef.value, state});
}

const vform = ref();


const defxml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
	'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="sample-diagram" targetNamespace="http://activiti.org/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">\n' +
	'  <bpmn2:process id="Process_1" name="1" isExecutable="true">\n' +
	'    <bpmn2:startEvent id="N1" name="开始节点">\n' +
	'      <bpmn2:outgoing>L1</bpmn2:outgoing>\n' +
	'    </bpmn2:startEvent>\n' +
	'    <bpmn2:sequenceFlow id="L1" sourceRef="N1" targetRef="N2" />\n' +
	'    <bpmn2:exclusiveGateway id="N9" name="条件分支">\n' +
	'      <bpmn2:documentation>判断审批金额是否大于100</bpmn2:documentation>\n' +
	'      <bpmn2:incoming>L4</bpmn2:incoming>\n' +
	'      <bpmn2:outgoing>L6</bpmn2:outgoing>\n' +
	'      <bpmn2:outgoing>L5</bpmn2:outgoing>\n' +
	'    </bpmn2:exclusiveGateway>\n' +
	'    <bpmn2:sequenceFlow id="L4" sourceRef="N4" targetRef="N9" />\n' +
	'    <bpmn2:sequenceFlow id="L6" name="王五分支线" sourceRef="N9" targetRef="N6">\n' +
	'      <bpmn2:extensionElements>\n' +
	'        <activiti:executionListener expression="money&#60;=100" event="take" />\n' +
	'      </bpmn2:extensionElements>\n' +
	'    </bpmn2:sequenceFlow>\n' +
	'    <bpmn2:sequenceFlow id="L5" name="李四分支线" sourceRef="N9" targetRef="N5">\n' +
	'      <bpmn2:extensionElements>\n' +
	'        <activiti:executionListener expression="money&#62;100" event="take" />\n' +
	'      </bpmn2:extensionElements>\n' +
	'    </bpmn2:sequenceFlow>\n' +
	'    <bpmn2:sequenceFlow id="L7" sourceRef="N5" targetRef="N7" />\n' +
	'    <bpmn2:sequenceFlow id="L8" sourceRef="N6" targetRef="N7" />\n' +
	'    <bpmn2:endEvent id="N3" name="结束节点">\n' +
	'      <bpmn2:incoming>L2</bpmn2:incoming>\n' +
	'    </bpmn2:endEvent>\n' +
	'    <bpmn2:sequenceFlow id="L2" sourceRef="N7" targetRef="N3" />\n' +
	'    <bpmn2:sequenceFlow id="L3" sourceRef="N2" targetRef="N4" />\n' +
	'    <bpmn2:userTask id="N2" name="起草节点" activiti:assignee="z3" activiti:candidateUsers="">\n' +
	'      <bpmn2:documentation>起草节点，表单数据一般从绑定的表单提取</bpmn2:documentation>\n' +
	'      <bpmn2:extensionElements>\n' +
	'        <activiti:formProperty id="userid" type="string" />\n' +
	'        <activiti:formProperty id="money" type="int" />\n' +
	'        <activiti:properties>\n' +
	'          <activiti:property name="编辑" value="edit" />\n' +
	'          <activiti:property name="撤回" value="back" />\n' +
	'          <activiti:property name="提交" value="commit" />\n' +
	'        </activiti:properties>\n' +
	'      </bpmn2:extensionElements>\n' +
	'      <bpmn2:incoming>L1</bpmn2:incoming>\n' +
	'      <bpmn2:outgoing>L3</bpmn2:outgoing>\n' +
	'    </bpmn2:userTask>\n' +
	'    <bpmn2:userTask id="N4" name="张三审批" activiti:assignee="z3" activiti:candidateUsers="">\n' +
	'      <bpmn2:documentation>审批节点</bpmn2:documentation>\n' +
	'      <bpmn2:extensionElements>\n' +
	'        <activiti:properties>\n' +
	'          <activiti:property name="审批" value="approve" />\n' +
	'          <activiti:property name="驳回" value="reject" />\n' +
	'        </activiti:properties>\n' +
	'      </bpmn2:extensionElements>\n' +
	'      <bpmn2:incoming>L3</bpmn2:incoming>\n' +
	'      <bpmn2:outgoing>L4</bpmn2:outgoing>\n' +
	'    </bpmn2:userTask>\n' +
	'    <bpmn2:userTask id="N5" name="李四审批" activiti:assignee="l4" activiti:candidateUsers="">\n' +
	'      <bpmn2:extensionElements>\n' +
	'        <activiti:properties>\n' +
	'          <activiti:property name="审批" value="approve" />\n' +
	'          <activiti:property name="驳回" value="reject" />\n' +
	'        </activiti:properties>\n' +
	'      </bpmn2:extensionElements>\n' +
	'      <bpmn2:incoming>L5</bpmn2:incoming>\n' +
	'      <bpmn2:outgoing>L7</bpmn2:outgoing>\n' +
	'    </bpmn2:userTask>\n' +
	'    <bpmn2:userTask id="N6" name="王五审批" activiti:assignee="w5" activiti:candidateUsers="">\n' +
	'      <bpmn2:extensionElements>\n' +
	'        <activiti:properties>\n' +
	'          <activiti:property name="审批" value="approve" />\n' +
	'          <activiti:property name="驳回" value="reject" />\n' +
	'        </activiti:properties>\n' +
	'      </bpmn2:extensionElements>\n' +
	'      <bpmn2:incoming>L6</bpmn2:incoming>\n' +
	'      <bpmn2:outgoing>L8</bpmn2:outgoing>\n' +
	'    </bpmn2:userTask>\n' +
	'    <bpmn2:userTask id="N7" name="赵六审批" activiti:assignee="z6" activiti:candidateUsers="">\n' +
	'      <bpmn2:extensionElements>\n' +
	'        <activiti:formProperty id="userid" type="string" />\n' +
	'        <activiti:taskListener class="do some thing" event="complete" />\n' +
	'        <activiti:properties>\n' +
	'          <activiti:property name="审批" value="approve" />\n' +
	'        </activiti:properties>\n' +
	'      </bpmn2:extensionElements>\n' +
	'      <bpmn2:incoming>L7</bpmn2:incoming>\n' +
	'      <bpmn2:incoming>L8</bpmn2:incoming>\n' +
	'      <bpmn2:outgoing>L2</bpmn2:outgoing>\n' +
	'    </bpmn2:userTask>\n' +
	'  </bpmn2:process>\n' +
	'  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
	'    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
	'      <bpmndi:BPMNEdge id="Flow_0uh8wmt_di" bpmnElement="L3">\n' +
	'        <di:waypoint x="560" y="200" />\n' +
	'        <di:waypoint x="560" y="250" />\n' +
	'      </bpmndi:BPMNEdge>\n' +
	'      <bpmndi:BPMNEdge id="Flow_01hb865_di" bpmnElement="L2">\n' +
	'        <di:waypoint x="560" y="670" />\n' +
	'        <di:waypoint x="560" y="732" />\n' +
	'      </bpmndi:BPMNEdge>\n' +
	'      <bpmndi:BPMNEdge id="Flow_1t81399_di" bpmnElement="L8">\n' +
	'        <di:waypoint x="690" y="550" />\n' +
	'        <di:waypoint x="690" y="630" />\n' +
	'        <di:waypoint x="610" y="630" />\n' +
	'      </bpmndi:BPMNEdge>\n' +
	'      <bpmndi:BPMNEdge id="Flow_00vdr2t_di" bpmnElement="L7">\n' +
	'        <di:waypoint x="430" y="550" />\n' +
	'        <di:waypoint x="430" y="630" />\n' +
	'        <di:waypoint x="510" y="630" />\n' +
	'      </bpmndi:BPMNEdge>\n' +
	'      <bpmndi:BPMNEdge id="Flow_1bnjbaa_di" bpmnElement="L5">\n' +
	'        <di:waypoint x="535" y="400" />\n' +
	'        <di:waypoint x="430" y="400" />\n' +
	'        <di:waypoint x="430" y="470" />\n' +
	'        <bpmndi:BPMNLabel>\n' +
	'          <dc:Bounds x="456" y="382" width="55" height="14" />\n' +
	'        </bpmndi:BPMNLabel>\n' +
	'      </bpmndi:BPMNEdge>\n' +
	'      <bpmndi:BPMNEdge id="Flow_12ug1tp_di" bpmnElement="L6">\n' +
	'        <di:waypoint x="585" y="400" />\n' +
	'        <di:waypoint x="690" y="400" />\n' +
	'        <di:waypoint x="690" y="470" />\n' +
	'        <bpmndi:BPMNLabel>\n' +
	'          <dc:Bounds x="611" y="382" width="56" height="14" />\n' +
	'        </bpmndi:BPMNLabel>\n' +
	'      </bpmndi:BPMNEdge>\n' +
	'      <bpmndi:BPMNEdge id="Flow_1miguqf_di" bpmnElement="L4">\n' +
	'        <di:waypoint x="560" y="330" />\n' +
	'        <di:waypoint x="560" y="375" />\n' +
	'      </bpmndi:BPMNEdge>\n' +
	'      <bpmndi:BPMNEdge id="Flow_1u6pmzo_di" bpmnElement="L1">\n' +
	'        <di:waypoint x="560" y="68" />\n' +
	'        <di:waypoint x="560" y="120" />\n' +
	'      </bpmndi:BPMNEdge>\n' +
	'      <bpmndi:BPMNShape id="Event_0byql27_di" bpmnElement="N1">\n' +
	'        <dc:Bounds x="542" y="32" width="36" height="36" />\n' +
	'        <bpmndi:BPMNLabel>\n' +
	'          <dc:Bounds x="539" y="2" width="43" height="14" />\n' +
	'        </bpmndi:BPMNLabel>\n' +
	'      </bpmndi:BPMNShape>\n' +
	'      <bpmndi:BPMNShape id="Gateway_0qd58o6_di" bpmnElement="N9" isMarkerVisible="true">\n' +
	'        <dc:Bounds x="535" y="375" width="50" height="50" />\n' +
	'        <bpmndi:BPMNLabel>\n' +
	'          <dc:Bounds x="538" y="432" width="44" height="14" />\n' +
	'        </bpmndi:BPMNLabel>\n' +
	'      </bpmndi:BPMNShape>\n' +
	'      <bpmndi:BPMNShape id="Event_1h4oob7_di" bpmnElement="N3">\n' +
	'        <dc:Bounds x="542" y="732" width="36" height="36" />\n' +
	'        <bpmndi:BPMNLabel>\n' +
	'          <dc:Bounds x="539" y="775" width="43" height="14" />\n' +
	'        </bpmndi:BPMNLabel>\n' +
	'      </bpmndi:BPMNShape>\n' +
	'      <bpmndi:BPMNShape id="Activity_0g48n8q_di" bpmnElement="N2">\n' +
	'        <dc:Bounds x="510" y="120" width="100" height="80" />\n' +
	'      </bpmndi:BPMNShape>\n' +
	'      <bpmndi:BPMNShape id="Activity_04wpn1b_di" bpmnElement="N4">\n' +
	'        <dc:Bounds x="510" y="250" width="100" height="80" />\n' +
	'      </bpmndi:BPMNShape>\n' +
	'      <bpmndi:BPMNShape id="Activity_0j8meci_di" bpmnElement="N5">\n' +
	'        <dc:Bounds x="380" y="470" width="100" height="80" />\n' +
	'      </bpmndi:BPMNShape>\n' +
	'      <bpmndi:BPMNShape id="Activity_0pa1f64_di" bpmnElement="N6">\n' +
	'        <dc:Bounds x="640" y="470" width="100" height="80" />\n' +
	'      </bpmndi:BPMNShape>\n' +
	'      <bpmndi:BPMNShape id="Activity_0qmb4lo_di" bpmnElement="N7">\n' +
	'        <dc:Bounds x="510" y="590" width="100" height="80" />\n' +
	'      </bpmndi:BPMNShape>\n' +
	'    </bpmndi:BPMNPlane>\n' +
	'  </bpmndi:BPMNDiagram>\n' +
	'</bpmn2:definitions>\n';


//region -----分类弹框逻辑-----
const cateModal = ref();
const openCateModal = () => {
	cateModal.value.openModal();
};
const cateChoose = (node: any) => {
	if (node == null) {
		form.value.cate = null;
	} else {
		form.value.cate = { id: node.id, name: node.name };
	}
};
//endregion

</script>

<style scoped>

</style>
